<template>
  <!-- width="500" align-center destroy-on-close -->
  <!-- w-full h-full top-[83px] left-[2px] -->


  <el-dialog style="margin-top: 30vh !important; translate: (-50% 0);" v-model="dialogDataShow" title="请选择管理的商家"
    :close-on-click-modal="true" :before-close="handleBeforeClose" @open="handleOpen" @close="handleClose">
    <!-- @bindMerchant="bindMerchantHandle" -->
    <!-- <MerchantSelect :key="key" /> -->
    <!--  -->
    <el-form-item label="行业">
      <el-select class="" placeholder="请选择行业" v-model="form.industryId" filterable clearable @change="value2Chagne">
        <el-option v-for="item in industryList" :key="item.industryId" :label="item.name" :value="item.industryId" />
      </el-select>
    </el-form-item>
    <el-form-item label="地区">
      <el-cascader class="flex-1" placeholder="请选择地区" v-model="form.areaId" :options="areaList" :props="props2"
        @change="TreeChange2" />
    </el-form-item>
    <el-form-item label="商家">
      <!--                class="w-[250px] flex-1" -->
      <!-- :placeholder="userStore.merchant?.name ? userStore.merchant?.name : '请选择商家'" -->
      <el-select v-model="form.merchantId" placeholder="请选择商家" class="" clearable filterable remote reserve-keyword
        :remote-method="remoteMethod" :loading="loading" remote-show-suffix>
        <el-option class="flex  h-[44px] justify-center  items-center" v-for="item in mercList" :key="item.value"
          :label="item.name" :value="item.merchantId">
          <img class="mr-4 rounded-lg " :src="item.doorFace" style="width: 30px; height: 30px;" alt="" srcset="">
          <span class="flex-1">{{ item.name }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <!--  -->

    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="closeDialog">返 回</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </template>
  </el-dialog>
  <div>

  </div>
</template>

<script setup>

import routerR from '@router'

// import routerR from '@router'



//选择机构
import { ElFormItem, ElSelect, ElCascader, ElOption, ElDialog, ElButton } from "element-plus"
// import MerchantSelect from "@/layout/components/merchantSelect/index.vue";
import { ref } from 'vue'

import { useDialogData } from '@/hooks/useDialogData.js'
const { updateMenuOpen, updateDialogDataShow, dialogDataShow, menuRef } = useDialogData();
// 获取路由
import usePermissionStore from '@/store/modules/permission'
let permissionStore = usePermissionStore()

import {
  merchantBind
} from "@/api/login.js";

// 传递的绑定参数
// const bindMerchantData = ref(false)

// console.log(bindMerchantData,'bindMerchantDatabindMerchantData')
// const bindMerchantHandle = (e) => {
//   console.log(e,'e bindMerchantHandle');
//   if (e) {
//     bindMerchantData.value = e
//   }
// }

// 用户信息
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();

// 确定
const submit = async () => {
  console.log('submit');
  // 校验
  if (!form.value.merchantId) return

  //  修改弹框数据 先赋值为空
  userStore.merchant = {}
  userStore.merchant.merchantId = form.value.merchantId
  userStore.areaId = form.value.areaId
  userStore.industryId = form.value.industryId

  // menuitem 状态
  updateMenuOpen(true)
  // 弹框状态
  // 让弹框折叠
  // 关闭
  updateDialogDataShow(false)
  // 绑定接口
  // let res = await merchantBind(bindMerchantData.value)
  //  
  let res = await merchantBind({
    areaId: userStore.areaId,
    industryId: userStore.industryId,
    merchantId: userStore.merchant.merchantId
  })
  if (!res) return
  routerR.app.config.globalProperties.$LoginDialogHide()
  // 获取路由
  permissionStore.generateRoutes()
}

// 取消关闭
const closeDialog = (e) => {
  e.stopPropagation(); // 阻止事件冒泡
  // 关闭弹框
  updateDialogDataShow(false)
  // 展开menuitem
  menuRef.value.close('/merchant/merchant')
  // 摧毁全局弹框
  routerR.app.config.globalProperties.$LoginDialogHide()
}
const handleOpen = () => {
  console.log('handleOpen');

}
const handleClose = () => {
  console.log('handleClose');
}

// 弹框外关闭
const handleBeforeClose = (done) => {
  console.log('handleBeforeClose');
  // 
  menuRef.value.close('/merchant/merchant')
  routerR.app.config.globalProperties.$LoginDialogHide()
  done()
}
/*  */
const remoteMethod = () => {

}

const value2Chagne = (e) => {
  // console.log(e, 'e');
  form.value.industryId = e
  form.value.name = ""
  loginMerchantListApi()
}
const value1 = ref('')
function findAreaNameById(data, targetId) {
  for (let i = 0; i < data.length; i++) {
    if (data[i].areaId === targetId) {
      return data[i].name;
    }
    if (data[i].children && data[i].children.length > 0) {
      const result = findAreaNameById(data[i].children, targetId);
      if (result) {
        return result;
      }
    }
  }
  return null;  // 如果没有找到
}
/*  */
const props2 = { multiple: false, value: "areaId", label: "name", emitPath: true, checkStrictly: true }
function TreeChange2(e) {
  // console.log(e, "e");
  let a = findAreaNameById(options, e[0])
  let b = findAreaNameById(options, e[1])
  let c = findAreaNameById(options, e[2])
  // console.log(a, "a");
  // console.log(b, "b");
  // console.log(c, "c");
  // console.log(e[e.length - 1], "e[e.length]");
  // ID
  form.value.areaId = `${e[e.length - 1]}`
  form.value.name = ""
  // api
  loginMerchantListApi()
}


import {
  loginMerchantList,
  authApiAreaList,
  authApiIndustryList
} from "@/api/login.js";


const mercList = ref([])
const areaList = ref([])
const industryList = ref([])
const form = ref({
  currentPage: 1,
  // 不做分页
  pageSize: 9999,
  // name: userStore.merchant?.name,
  name: '',
  areaId: userStore.areaId,
  industryId: userStore.industryId,
  merchantId: userStore?.merchant?.merchantId ? userStore?.merchant?.merchantId : ''
})

// 请求
const options = ref([])
// 选中的值
const value = ref(userStore?.merchant?.merchantId || '')
const value2 = ref('')

const loading = ref(false)


const emit = defineEmits()




function loginMerchantListApi() {
  loginMerchantList(form.value).then(
    (res) => {
      mercList.value = [...res.records]; // 确保这里的 re 数据格式正确
    }
  );
}
function authApiAreaListApi() {
  authApiAreaList().then(
    (res) => {
      areaList.value = [...res];
    }
  );
}
function authApiIndustryListApi() {
  authApiIndustryList().then(
    (res) => {
      industryList.value = [...res];
    }
  );
}

onMounted(async () => {
  await authApiAreaListApi()
  await loginMerchantListApi()
  await authApiIndustryListApi()
})

</script>

<style lang='scss' scoped>
.my-dialog {
  margin-top: 0px !important;
}

// ::v-deep .el-dialog {
//   margin-top: 0px !important;
// }

// :deep(.is-align-center) {
//   margin-top: 0 !important;
// }

// :deep(.el-dialog) {
//   margin-top: 0 !important;
//   margin: 0;
// }

// :deep(.el-dialog:not(.is-fullscreen)) {
//   margin-top: 0 !important;
// }</style>